import { View, Image, Button } from "@tarojs/components";

import bg from "../../image/pic5.jpg";
import ava from "../../image/avater2.png";
import { AtAvatar, AtGrid } from "taro-ui";
import "./index.scss";
import Taro, { useReady } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { isLogin, logout } from "../../api/login";
import { ImageUrl } from "../../utils/request";
const TempData = [
  {
    image:
      "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png",
    value: "订单"
  },
  {
    image:
      "https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png",
    value: "售后"
  },
  {
    image:
      "https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png",
    value: "待收货"
  },
  {
    image:
      "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png",
    value: "公告通知"
  }
];

export default () => {
  const [isLogina, SetIsLogin] = useState<boolean>();
  const [userInfo, SetUserInfo] = useState<any>();

  useReady(() => {
    isLogin().then(resp => {
      SetIsLogin(resp.isLogin);
      if (resp.isLogin) {
        SetUserInfo(Taro.getStorageSync("userInfo"));
      }
    });
  });
  useEffect(() => {
    isLogin().then(resp => {
      SetIsLogin(resp.isLogin);
      if (resp.isLogin) {
        SetUserInfo(Taro.getStorageSync("userInfo"));
      }
    });
  }, []);

  return (
    <View>
      {/* 头像 */}
      <View className="AvatarWrapper">
        {/* 背景图 */}
        <Image mode="scaleToFill" src={bg}></Image>
        {isLogina && userInfo && userInfo.avatar && (
          <Image mode="scaleToFill" src={ImageUrl + userInfo.avatar}></Image>
        )}

        {/* 头像 */}
        <View
          className="AvaterKuang"
          onClick={() => {
            console.log(isLogina);
            console.log(userInfo);
          }}
        >
          <Image src={ava}></Image>
        </View>
        {/* 登录 */}
        {isLogina && userInfo && (
          <View className="AvaterBigKuang">
            <View style={{ fontWeight: 900 }}>{userInfo.nickName}</View>
            <Button
              className="LoginButton"
              type="primary"
              onClick={() => {
                // Taro.navigateTo({
                //   url: "/pages/Login/index"
                // });
                logout();
                SetIsLogin(false);
                Taro.clearStorage();
              }}
            >
              退出
            </Button>
          </View>
        )}
        {!isLogina && (
          <View className="AvaterBigKuang">
            <View style={{ fontWeight: 900 }}>亲，请先登录</View>
            <Button
              className="LoginButton"
              type="primary"
              onClick={() => {
                Taro.reLaunch({
                  url: "/pages/Login/index"
                });
              }}
            >
              登录
            </Button>
          </View>
        )}
      </View>

      {/* 内容 */}
      <View className="Content">
        <AtGrid
          data={TempData}
          columnNum={4}
          onClick={(_, index) => {
            if (index === 3) {
              Taro.navigateTo({
                url: "/pages/notice/index"
              });
            }

            if (index === 0 || index === 1 || index === 2) {
              Taro.navigateTo({
                url: "/pages/order/index"
              });
            }
          }}
        ></AtGrid>
      </View>
      {/* 退出 */}
      <Button></Button>
    </View>
  );
};
